<template>
    <div class="container-fluid ">
        <TopBar></TopBar>
        <br><br><br>
        <div class="box-bg">
            <div class="img-box">
                <div v-if="imgShow.bgImg">
                    <div class="bg-img3" :style="`background-image: url(${userStore.Contact.background_image})`"></div>
                    <div class="bg-img2" :style="`background-image: url(${userStore.Contact.background_image})`"></div>
                </div>
                <div v-else>
                    <div class="bg-img3"></div>
                    <div class="bg-img2"></div>
                </div>

                <div class="bg-img1">
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <div class="font-box">
                        <!-- 头像行 -->
                        <div class="font-box-1">
                            <div class="circular-img">
                                <div v-if="imgShow.avatar" class="top-icon"
                                    :style="`background-image: url(${userStore.Contact.avatar})`">
                                </div>
                                <div v-else>
                                    <img src="../assets/icons/favsion.png" alt="">
                                </div>
                            </div>
                            <div class="detil-box">
                                <p>{{ userStore.Contact.nickname }}</p>
                                <span>{{ userStore.Contact.email }}</span>
                                <br>
                                <span>{{ userStore.Contact.introduction }}</span>
                            </div>

                        </div>
                        <!-- 标签行 7个最多-->
                        <div class="font-box-2">
                            <div v-for="career in userStore.Contact.career_tags.split(',')" :key="career">
                                <div class="career-cards"><span>{{ career }}</span></div>
                            </div>


                        </div>
                        <!-- 按钮行 -->
                        <div class="font-box-3">

                            <p class="badge rounded-pill text-bg-light">
                                {{ $t('authorShowPage.article') }}{{ userStore.Contact.articleCounts }}</p>
                            <p class="badge rounded-pill text-bg-primary">
                                {{ $t('authorShowPage.QS') }}{{ userStore.Contact.questionCounts }}</p>

                        </div>

                    </div>
                </div>

            </div>

        </div>
        <br><br><br>
        <BottomBar></BottomBar>
    </div>
</template>
<script setup lang="ts">
import { reactive } from "vue"
import { UserStore } from '../store/userStore/index'
const userStore = UserStore()
const imgShow = reactive({
    bgImg: true,
    avatar: true
})

function imgCheck() {
    //判断图像是否存在，否则默认
    if (userStore.Contact.avatar.length < 8) {
        imgShow.avatar = false
    }
    if (userStore.Contact.background_image.length < 8) {
        imgShow.bgImg = false
    }
}
imgCheck();

</script>
<style lang="scss" scoped>
@media screen and (max-width: $passlink-media-max-width-5) {}

.container-fluid {
    background-color: $passlink-bg-color;

    min-height: 1000px;

    .box-bg {

        width: 100%;
        background-color: $passlink-bg-color;
        height: auto;
        margin: auto;

        .img-box {
            position: relative;
            width: 100%;
            color: $passlink-font-color-white;
            height: 500px;


            .bg-img1 {
                position: absolute;
                width: 100%;
                height: 600px;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                z-index: 999;
                background: rgba(36, 36, 36, 0.53);

            }

            .bg-img2 {
                position: absolute;
                width: 100%;
                height: 600px;
                background-size: cover;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                z-index: 9;
                background-image: url('../assets/biogr/3454.png');

                backdrop-filter: blur(10px);
                filter: blur(5px);
            }

            .bg-img3 {
                position: absolute;
                width: 100%*0.9;
                height: 400px;
                background-repeat: no-repeat;
                background-size: cover;
                z-index: 99;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                opacity: 0.8;
                background-image: url('../assets/biogr/3454.png');
            }

            .font-box {
                width: 80%;
                margin: auto;

                .font-box-1 {
                    display: flex;
                    color: $passlink-font-color-white;
                    width: 80%;
                    height: 120px;
                    text-align: left;

                    .detil-box {
                        margin-left: 20px;

                        p {
                            font-weight: bold;
                            font-size: $passlink-font-size18;
                        }

                        span {
                            font-weight: lighter;
                            font-size: $passlink-font-size14;
                        }
                    }

                    .circular-img {
                        img {
                            width: 100px;
                            height: 100px;
                            border: 1px solid $passlink-font-color-white;
                            border-radius: 100%;
                        }

                        .top-icon {
                            width: 80px;
                            height: 80px;
                            background-size: cover;
                            border-radius: 100%;
                          
                            transition: all .5s;
                        }

                        .top-icon:hover {
                            padding: 3px;
                            box-shadow: 0 0 15px $passlink-font-color-white;
                        }

                        .top-icon:hover::before {
                            transition: all .5s;
                        }


                    }
                }

                .font-box-2 {
                    display: flex;

                    color: $passlink-font-color-white;
                    width: 80%;
                    height: 24px;
                    padding: 3px;

                    text-align: left;
                    align-items: center;

                    .career-cards {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        text-align: center;
                        font-weight: lighter;
                        font-size: $passlink-font-size8;
                        padding-left: 5px;
                        padding-right: 5px;
                        margin-left: 20px;
                        width: auto;
                        height: 20px;
                        box-sizing: border-box;
                        border: 1px solid rgb(251, 255, 54);
                        border-radius: 20px;
                    }
                }

                .font-box-3 {
                    display: flex;

                    color: $passlink-font-color-white;
                    width: 80%;
                    height: 60px;
                    padding: 3px;

                    align-items: center;

                    p {
                        margin-left: 20px;
                        font-weight: lighter;
                        font-size: $passlink-font-size18;
                    }

                }
            }

        }


    }

}</style>
